function init() {
    var arr = [
        { id: 1, No: 111111, roomNo: 1, roomName: '大会议室', company: '国信安', user: '张三', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '已预约' },
        { id: 2, No: 112312, roomNo: 2, roomName: '中会议室', company: '国信安', user: '李四', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '已完成' },
        { id: 3, No: 123313, roomNo: 3, roomName: '小会议室', company: '国信安', user: '王二', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '已取消' },
        { id: 4, No: 115614, roomNo: 4, roomName: '小会议室', company: '国信安', user: '刘五', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '使用中' },
        { id: 5, No: 176715, roomNo: 5, roomName: '中会议室', company: '国信安', user: '陈八', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '已取消' },
        { id: 6, No: 167516, roomNo: 6, roomName: '大会议室', company: '国信安', user: '张三', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '已预约' },
        { id: 6, No: 167516, roomNo: 6, roomName: '小会议室', company: '国信安', user: '张三', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '已取消' },
        { id: 6, No: 167516, roomNo: 6, roomName: '大会议室', company: '国信安', user: '张时', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '已预约' },
        { id: 6, No: 167516, roomNo: 6, roomName: '中会议室', company: '国信安', user: '安东尼', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '已完成' },
        { id: 6, No: 167516, roomNo: 6, roomName: '大会议室', company: '国信安', user: '大米', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '已预约' },
        { id: 6, No: 167516, roomNo: 6, roomName: '中会议室', company: '国信安', user: '小米', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '使用中' },
        { id: 6, No: 167516, roomNo: 6, roomName: '小会议室', company: '国信安', user: '梨', tel: 16666666666, time: '2023.02.30 9:00-11:00', money1: 10000, money2: 10000, state: '已预约' }
    ];
    //获取表单对象
    var table = document.querySelector('.table');
    // 获取表单主体标签对象
    var tbody = document.querySelector('tbody');
    // 获取元素
    var NoIpt = document.querySelector('#No');
    var roomNoIpt = document.querySelector('#roomNo');
    var roomNameIpt = document.querySelector('#roomName');
    var companyIpt = document.querySelector('#company');
    var userIpt = document.querySelector('#user');
    var telIpt = document.querySelector('#tel');
    var timeIpt = document.querySelector('#time');
    var money1Ipt = document.querySelector('#money1');
    var money2Ipt = document.querySelector('#money2');
    var stateIpt = document.querySelector('#state');
    // 分页相关参数
    let formBg = document.querySelector('#form_bg');//表格容器
    let pagination = document.querySelector('.pagination');//分页容器
    let pageCount = Math.ceil(arr.length / 5); //根据数据的长度计算总共几页
    let newsDataRender = [];//每页要显示的数据
    let p = 1;//根据p值显示每页的数据

    // 初始化页面
    render();
    //flag设置当前是否有行在进行修改操作  为1则有  为0则无
    var flag = 0;

    //判断输入的是否是数字
    function isNumber(n) {
        return !isNaN(parseInt(n)) || isFinite(n);
    }

    // 给重置按钮添加点击事件
    function clearInput() {
        NoIpt.value = '';
        roomNoIpt.value = '';
        roomNameIpt.value = '';
        companyIpt.value = '';
        userIpt.value = '';
        telIpt.value = '';
        timeIpt.value = '';
        money1Ipt.value = '';
        money2Ipt.value = '';
        stateIpt.value = '';
    }
    //封装原始函数，渲染页面 生成页面表格   
    function render() {
        formBg.innerHTML = '';
        newsDataRender = arr.slice((p - 1) * 5, 5 * p); //没页显示的长度，5条
        newsDataRender.forEach((item, index) => {
            formBg.innerHTML += `
          <tr>
            <td>${item.id}</td>
            <td>${item.No}</td>
            <td>${item.roomNo}</td>
            <td>${item.roomName}</td>
            <td>${item.company}</td>
            <td>${item.user}</td>
            <td>${item.tel}</td>
            <td>${item.time}</td>
            <td>${item.money1}</td>
            <td>${item.money2}</td>
            <td>${item.state}</td>
            <td>
              <button onclick=" edit(this);" class="edit">编辑</button>
              <button onclick="remove(this);" class="delete">删除</button>
            </td>
          </tr>
          `;
        })
    };

    // 渲染分页
    for (let i = 1; i <= pageCount; i++) {
        pagination.innerHTML += `<a>${i}</a>`;
    }
    let asAll = pagination.querySelectorAll('a');
    //页面刚进来时第一页高亮
    asAll[p - 1].classList.add('active');
    //遍历总页数
    asAll.forEach((item, index) => {
        //点击页数
        item.onclick = function () {
            for (let j = 0; j < asAll.length; j++) {
                asAll[j].classList.remove('active');
            }
            this.classList.add('active');
            p = index + 1; //点击页数，改变p的值，以改变这个页面要显示的数据，达到分页的效果
            render(); //重新渲染页面
        }
    });

    //点击上一页下一页，改变高亮
    let changePageClass = () => {
        for (let j = 0; j < asAll.length; j++) {
            asAll[j].classList.remove('active');
        }
        asAll[p - 1].classList.add('active');
    };
    //上一页
    let prev = document.querySelector('.prev');
    prev.onclick = function (e) {
        if (p <= 1) {
            console.log(p);
            layer.alert('已经是第一页了');
            return;
        } else {
            p = p - 1;
            changePageClass();
            render();
        }
    };
    //下一页
    let next = document.querySelector('.next');
    next.onclick = function () {
        if (p >= asAll.length) {
            layer.alert('已经是最后一页了');
            return;
        }
        p = p + 1;
        changePageClass();
        render();
    }


    //判断当前是否有行在进行修改操作
    function isModify() {
        var trs = tbody.children;
        for (var i = 0; i < trs.length; i++) {
            if (trs[i].cells[0].innerHTML == '<input type="text" id="input1">') {
                flag = 1;
                return 0;
            }
        }
        flag = 0;
        return 0;
    }



    //编辑修改
    function edit(obj) {
        //若有多行同时进行修改工作，则没行中的每列中的input的值不能正确显示
        isModify();
        if (flag == 1) {
            layer.alert('只能允许一行内容同时进行修改操作');
            return 0;
        }
        flag = 1;
        var tr = obj.parentNode.parentNode;
        //tbody的每行的rowIndex从0开始
        var index = tr.rowIndex - 1;
        var td1 = tbody.rows[index].cells[0];
        var td1_content = td1.innerHTML;
        var td2 = tbody.rows[index].cells[1];
        var td2_content = td2.innerHTML;
        var td3 = tbody.rows[index].cells[2];
        var td3_content = td3.innerHTML;
        var td4 = tbody.rows[index].cells[3];
        var td4_content = td4.innerHTML;
        var td5 = tbody.rows[index].cells[4];
        var td5_content = td5.innerHTML;
        var td6 = tbody.rows[index].cells[5];
        var td6_content = td6.innerHTML;
        var td7 = tbody.rows[index].cells[6];
        var td7_content = td7.innerHTML;
        var td8 = tbody.rows[index].cells[7];
        var td8_content = td8.innerHTML;
        var td9 = tbody.rows[index].cells[8];
        var td9_content = td9.innerHTML;
        var td10 = tbody.rows[index].cells[9];
        var td10_content = td10.innerHTML;
        var td11 = tbody.rows[index].cells[10];
        var td11_content = td11.innerHTML;
        var td12 = tbody.rows[index].cells[11];

        td1.innerHTML = '<input type="text"  id="input1">';
        td2.innerHTML = '<input type="text" id="input2">';
        td3.innerHTML = '<input type="text" id="input3">';
        td4.innerHTML = '<input type="text" id="input4">';
        td5.innerHTML = '<input type="text" id="input5">';
        td6.innerHTML = '<input type="text" id="input6">';
        td7.innerHTML = '<input type="text" id="input7">';
        td8.innerHTML = '<input type="text" id="input8">';
        td9.innerHTML = '<input type="text" id="input9">';
        td10.innerHTML = '<input type="text" id="input10">';
        td11.innerHTML = '<input type="text" id="input11">';
        td12.innerHTML = '<button class="edit" onclick="save(this);">保存</button> <button class="delete" onclick="remove(this);">删除</button>';
        //把原本表格里面的内容填到input当中
        document.getElementById('input1').value = td1_content;
        document.getElementById('input2').value = td2_content;
        document.getElementById('input3').value = td3_content;
        document.getElementById('input4').value = td4_content;
        document.getElementById('input5').value = td5_content;
        document.getElementById('input6').value = td6_content;
        document.getElementById('input7').value = td7_content;
        document.getElementById('input8').value = td8_content;
        document.getElementById('input9').value = td9_content;
        document.getElementById('input10').value = td10_content;
        document.getElementById('input11').value = td11_content;
        return 0;
    }
    //删除
    function remove(obj) {
        layer.alert('确定删除吗？');
        var tr = obj.parentNode.parentNode;
        tbody.removeChild(tr);
        return 0;
    }

    //保存
    function save(obj) {
        flag = 0;
        var tr = obj.parentNode.parentNode;
        var index = tr.rowIndex - 1;
        var td1 = tbody.rows[index].cells[0];
        var td2 = tbody.rows[index].cells[1];
        var td3 = tbody.rows[index].cells[2];
        var td4 = tbody.rows[index].cells[3];
        var td5 = tbody.rows[index].cells[4];
        var td6 = tbody.rows[index].cells[5];
        var td7 = tbody.rows[index].cells[6];
        var td8 = tbody.rows[index].cells[7];
        var td9 = tbody.rows[index].cells[8];
        var td10 = tbody.rows[index].cells[9];
        var td11 = tbody.rows[index].cells[10];
        var td12 = tbody.rows[index].cells[11];
        td1.innerHTML = document.getElementById('input1').value;
        td2.innerHTML = document.getElementById('input2').value;
        td3.innerHTML = document.getElementById('input3').value;
        td4.innerHTML = document.getElementById('input4').value;
        td5.innerHTML = document.getElementById('input5').value;
        td6.innerHTML = document.getElementById('input6').value;
        td7.innerHTML = document.getElementById('input7').value;
        td8.innerHTML = document.getElementById('input8').value;
        td9.innerHTML = document.getElementById('input9').value;
        td10.innerHTML = document.getElementById('input10').value;
        td11.innerHTML = document.getElementById('input11').value;
        td12.innerHTML = '<button class="edit" onclick=" edit(this);">编辑</button> <button class="delete" onclick="remove(this);">删除</button>';
        return 0;
    }

    //查询
    function Search() {
        let No = $('#No').val();//取输入框的值
        let roomNo = $('#roomNo').val();
        let roomName = $('#roomName').val();
        let company = $('#company').val();
        let user = $('#user').val();
        let tel = $('#tel').val();
        let time = $('#time').val();
        let money1 = $('#money1').val();
        let money2 = $('#money2').val();
        let state = $('#state').val();
        let tbody = $('tbody')[0];
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].No == No || arr[i].roomNo == roomNo ||
                arr[i].roomName == roomName || arr[i].company == company ||
                arr[i].user == user || arr[i].tel == tel || arr[i].time == time ||
                arr[i].money1 == money1 || arr[i].money2 == money2 || arr[i].state == state) {
                tbody.rows[i].style.display = 'table-row';
            } else {
                tbody.rows[i].style.display = 'none';
            }
        }
    }

}